<template>
  <div>
    <h2>房号添加</h2>
    <hr />
    <table border="1">
      <tr>
        <td>房号名称:</td>
        <td>
          <input type="text" v-model="state.mdName" />
        </td>
      </tr>
      <tr>
        <td>房号图片:</td>
        <td>
          <input type="file" @change="TP" />
          <img :src="src" alt="" width="60px" height="60px" v-if="src != ''" />
        </td>
      </tr>
      <tr>
        <td>房号地址:</td>
        <td>
          <input type="text" v-model="state.mdAddress" />
        </td>
      </tr>
      <tr>
        <td>房号电话:</td>
        <td>
          <input type="text" v-model="state.mdPhone" />
        </td>
      </tr>
      <tr>
        <td>房号描述:</td>
        <td>
          <textarea v-model="state.mdms"></textarea>
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" value="添加" @click="MDAdd" />
        </td>
        <td>
          <input type="button" value="房号列表" @click="MDShow" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const route = useRoute();

let data: any = reactive({
  state: {
    mdName: '',
    mdPhoto: '',
    mdAddress: '',
    mdPhone: '',
    mdms: '',
  },
  src:''
});
let { state,src } = toRefs(data);

function TP(e:any)
{
  var FD=new FormData();
  var file=e.target.files[0];
  FD.append('file',file);
  axios({
    url:'https://localhost:7064/api/MenDian/TP',
    method:'post',
    data:FD
  })
  .then(res=>{

  if(res.data.data=='图片格式不正确')
  {
    alert('图片格式不正确');
    return
  }
  if(res.data.data=='图片不能大于2M')
  {
    alert('图片不能大于2M');
    return
  }
  if(res.data.data!='图片上传失败')
  {
    alert('图片上传成功');
    src.value=res.data.data
  }
  else{
    alert('图片上传失败')
    return 
  }
  })
  .catch(err=>{
    console.log(err)
  })
}


//门店添加
function MDAdd() {
  let obj = {
 
    mdName:state.value.mdName,
    mdPhoto:src.value,
    mdAddress: state.value.mdAddress,
    mdPhone: state.value.mdPhone,
    mdms: state.value.mdms,
    mdzt: 1,
    mdDelete: 0
  };
 
  if(obj.mdName=="")
  {
    alert('房号名称不能为空');
    return 
  }
  if(obj.mdPhoto=="")
  {
    alert('房号图片不能为空');
    return 
  }
  if(obj.mdAddress=="")
  {
    alert('房号地址不能为空');
    return 
  }
  if(obj.mdPhone=="")
  {
    alert('房号电话不能为空');
    return 
  }
  if(obj.mdms=="")
  {
    alert('房号介绍不能为空');
    return 
  }
  axios({
    url:'https://localhost:7064/api/MenDian/MDAdd',
    method:'post',
    data:obj
  })
  .then(res=>{
    if(res.data.data==-1)
  {
    alert('房号已存在，请重新输入');
    return 
  }
  
  if(res.data.data>0)
  {
    alert('添加成功');
    router.push('/FHShow')
  }
  })
  .catch(err=>{
    console.log(err)
  })






}

function MDShow()
{
  router.push('/FHShow')
}

</script>

<style scoped></style>
